﻿var ul = document.getElementsByTagName('ul')[0];
var div = document.getElementsByClassName("item");
var subNav = document.getElementById("subNav");
/***导航栏***/
//鼠标进入事件
ul.addEventListener('mouseover',function(e) {
    var target = e.target;
    target.parentNode.style.display="block";
    target.parentNode.className="hover";
    for(var i=0;i<div.length;i++) {
        var divs = div[i];
        if(target.parentNode.parentNode.className==divs.id) {
            var ids = document.getElementById(divs.id);
            ids.style.display="block";
            ids.style.top=0;
        }
    }
},false);
//鼠标退出事件
ul.addEventListener("mouseout",function(e) {
    var target = e.target;
    for(var i=0;i<div.length;i++) {
        var divs = div[i];
        divs.style.display="none";
        target.parentNode.className="";
    }
})
//导航下拉菜单鼠标事件
for(var i=0;i<div.length;i++){
    div[i].addEventListener("mouseover",function() {
        this.style.display="block";
        var ids = document.getElementsByClassName(this.id);
        ids[0].children[0].className="hover";

    });
    div[i].addEventListener("mouseout",function() {
        this.style.display="none";
        var ids = document.getElementsByClassName(this.id);
        ids[0].children[0].className="";
    });
}


/***banner图片轮播***/
var imgs = [
    {"i":0,"img":"imgs/qsmy.png"},
    {"i":1,"img":"imgs/yyzt.png"},
    {"i":2,"img":"imgs/wxxsh.png"},
    {"i":3,"img":"imgs/clannad.png"},
    {"i":4,"img":"imgs/hxwhj.png"}
];
var idx = document.getElementById("idx");
var img =document.getElementById("img");
var banner = document.getElementById("banner");
var current = idx.getElementsByClassName("current");

var banners = {
    LIWIDTH:0,
    DISTANCE:0,//每次轮播总距离
    DURATION:1500,//每次轮播总时长
    STEPS:50,//每次轮播总步数
    step:0,//轮播每一步的步长
    interval:0,//轮播每一步时间
    moved:0,//已经移动的步数
    timer:null,
    now:0,
    WAIT:1500,
    canAuto:true,
    init:function(){
        var me = this;
        this.LIWIDTH =parseFloat(getComputedStyle(banner).width);
        this.interval = this.DURATION/this.STEPS;
        this.update();
            //为id为idx的ul绑定鼠标进入事件，function(e){
            idx.addEventListener("mouseover",function(e){
                //如果目标元素是li且目标元素的class不是hover
                if(e.target.nodeName=="LI"&&e.target.className!="hover"){
                    //计算移动个数n: 目标元素的内容-idx中class为hover的元素的内容
                    var n=e.target.innerHTML-current[0].innerHTML;
                    imgs=imgs.concat(imgs.splice(0,n));
                    me.update()
                }
                    me.move(n);
        });
    //为id为banner的div绑定鼠标进入事件function(){
    banner.addEventListener("mouseover",function(){
        me.canAuto=false;//修改canAuto属性为false
    });
    //为id为banner的div绑定鼠标移出事件function(){
    banner.addEventListener("mouseout",function(){
        me.canAuto=true;//修改canAuto属性为true
    });
    this.autoMove();//启动自动轮播
},
    autoMove:function(){//启动自动轮播
        var me=this;
        //启动一次性定时器
        this.timer=setTimeout(function(){
            if(me.canAuto){//如果canAuto为true
                me.move(1);//调用move,传入参数1
            }else{//否则
                me.autoMove();//再次调用autoMove
            }
        },this.WAIT);
    },
    move:function(n){//启动一次轮播，n表示要移动的li个数
        if(this.timer!=null){//如果timer不等于null
            clearTimeout(this.timer);//停止一次性定时器timer
            this.timer=null;
            //$("#imgs").style.left="";//清除id为imgs的left属性
        }
        //获得id为imgs的ul的计算后的left
        var l=parseFloat(getComputedStyle(img).left);
        //计算DISTANCE: LIWIDTH*n
        this.DISTANCE=n>0?
        this.LIWIDTH*n-(-l):l;
        //计算step: DISTANCE/STEPS
        this.step=this.DISTANCE/this.STEPS;
        if(n<0){//如果n<0
            //删除imgs结尾的-n个元素，将imgs剩余元素拼接到imgs删除元素的结尾，结果保存回imgs中
            imgs=imgs.splice(imgs.length-(-n),-n).concat(imgs);
            //设置id为imgs的ul的left为DISTANCE
            img.style.left=this.DISTANCE+"px";
            this.update();//更新页面
        }
        //启动一次性定时器，传入moveStep函数，设置时间为interval，将序号保存在timer中
        this.timer=setTimeout(
            this.moveStep.bind(this,n),this.interval);
    },
    moveStep:function(n){
        //移动每一步
        //获得id为imgs的ul计算后的样式的left
        var l=parseFloat(getComputedStyle(img).left);
        //设置id为imgs的ul的left为left-step
        img.style.left=l-this.step+"px";
        this.moved++;//moved+1
        if(this.moved<this.STEPS){//如果moved<STEPS
            //启动一次性定时器，传入moveStep函数，设置时间为interval，将序号保存在timer中
            this.timer=setTimeout(
                this.moveStep.bind(this,n),this.interval
            );
                //imgs=imgs.concat(imgs.splice(0,n));
                //this.update()
        }else{//本轮轮播结束
            if(n>0){//如果n>0
                //删除imgs开头的n个元素，再将删除的元素拼接到imgs结尾，结果保存回imgs中
                imgs=imgs.concat(imgs.splice(0,n));
                this.update();//更新页面
            }
            img.style.left="";//清除id为imgs的ul的left
            this.timer=null;//timer置为null
            this.moved=0;//moved归0
            //每次轮播而技术后，再次调用autoMove启动自动轮播:
            this.autoMove();
        }
    },
    update:function() {
        img.style.width = this.LIWIDTH*imgs.length+"px";
            for(var i= 0,idxs="",lis="";i<imgs.length;){
                //  lis +='<li style='+"width:"+this.LIWIDTH+'px'+'><img src='+imgs[i].img+'></li>'
                lis += '<li><a href=""><img src="' + imgs[i].img + '"></a></li>'
                idxs+="<li>"+(i+1)+"</li>";
                i++;
                //设置id为img的元素的内容为lis
                img.innerHTML=lis;
                //设置id为idx的元素的内容为idxs
                idx.innerHTML=idxs;
            }
                idx.children[imgs[0].i].className = "current"
        }
}

//广告
   var adv = document.getElementsByClassName("adv");
   var advertisement = document.getElementById("advertisement");

   var advs =[
   {"i":1,"img":"imgs/1.png"},
   {"i":2,"img":"imgs/2.png"},
   {"i":3,"img":"imgs/3.png"},
   ]
   var advertisements={
       LIHEIHGT: 0,
       DISTANCE: 0,
       DURATION: 1000,
       STEPS: 50,
       interval: 0,
       step: 0,
       moved: 0,
       timer:null,
       WAIT: 3000,
       init:function(){

          this.LIHEIHGT=parseFloat(getComputedStyle(advertisement).height);
           this.autoMove();
            this.update();
       },
       autoMove:function() {
           var TOP = parseFloat(getComputedStyle(adv[0]).top);
          setInterval(function () {
              TOP += -100;
              TOP = TOP%300;
              adv[0].style.top=TOP+"px";
        }, this.WAIT);
       },
       update:function(){
           //adv[0].style.height=this.LIHEIHGT*advs.length+"px";
           for(var i= 0,lis="";i<advs.length;){
                lis +='<li><a href=""><img src="'+advs[i].img+'"></a></li>';
               i++;
               adv[0].innerHTML=lis;
           };
       }
   };
window.addEventListener("load",function(){banners.init();advertisements.init();});

//书签页
var pages = document.getElementById("pages");
var page = document.getElementsByClassName("pages_main");
pages.addEventListener("mouseover",function(e) {
    var target = e.target;
    var i = target.parentNode.className.slice(5, 6);
    if (target.parentNode.className == "item_" + i) {
        page[0].className = "pages_main_" + i;
    };
});

pages.addEventListener("mouseout",function(){
    pages.children[0].children[0].className ="pages_main";
});
//页面滚动事件
window.addEventListener("scroll",function(){
    var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
    var sHeight= window.document.body.scrollHeight;
    var wHeight= window.innerHeight;
    var elevator=document.getElementsByClassName("elevator")[0];
    if(scrollTop==(sHeight-wHeight)){

        elevator.style.display="block";
    }else{
        elevator.style.display="none";
    }

})

